<template>
  <div class="AAU_module">
    <module-header
      :title="title"
      :meter="meter"
      :params="{
        module: 'AAU',
        status,
        Id: '',
        Bore: '',
        Cutting: ''
      }"
    />
    <section class="settings">
      <el-tabs v-model="activeName" class="column">
        <el-tab-pane label="机械外观检测" name="first">
          <file-upload class="upload-container" title="外观截图"></file-upload>
          <div class="remark-container">
            <div class="item">
              <span>备注/补料清单</span>
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 6 }"
                placeholder="请输入备注信息"
              />
            </div>
            <div class="item direction">
              <span>流向方向</span>
              <el-select size="mini"></el-select>
            </div>
            <div class="item appearance">
              <span>外观检测</span>
              <el-select size="mini"></el-select>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="电子检测" name="second">
          <file-upload class="upload-container" title="界面/信号截图"></file-upload>
          <div class="remark-container">
            <div class="item">
              <span>故障分析/处理措施</span>
              <el-input
                type="textarea"
                :autosize="{ minRows: 6, maxRows: 6 }"
                placeholder="请输入备注信息"
              />
            </div>
            <div class="item direction">
              <span>零流量</span>
              <el-select size="mini"></el-select>
            </div>
            <div class="item appearance">
              <span>信号检查</span>
              <el-select size="mini"></el-select>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="column normal">
        <file-upload title="相关资料" />
        <div class="item">
          <span>出厂编号</span>
          <el-input size="mini" placeholder="请输入" />
        </div>
      </div>
    </section>
    <section class="table">
      <record-table
        title="总装记录表"
        procedure="AAU"
        :meter="meter"
        :limits="RecordTableLimit"
        :params="{
          title,
          Cutting: ''
        }"
        :tableData="tableData"
        :tableColumnDict="tableColumnDict"
      ></record-table>
    </section>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop } from 'vue-property-decorator'
import { tableColumnDict, TableColumnType } from './params'
import ModuleHeader from '@/components/basic/ModuleHeader.vue'
import RecordTable from '@/components/basic/RecordTable.vue'
import FileUpload from '@/components/basic/FileUpload.vue'
import { Dictionary } from '@/interface/Basic'
@Component({
  components: {
    ModuleHeader,
    RecordTable,
    FileUpload
  }
})
class ReturnRecord extends Vue {
  @Prop() status!: string
  @Prop({ default: '' }) meter!: string
  @Prop({ required: true }) title!: string
  tableData: TableColumnType[] = []
  tableColumnDict = tableColumnDict
  activeName: string = 'first'
  init_button_limit: Dictionary<boolean> = {
    // 保存
    AAG_0: true,
    // 删除
    AAG_1: true,
    // 新建
    AAG_2: true,
    // 读取三坐标
    AAG_3: true,
    // 手动选择三坐标
    AAG_4: true
  }
  get RecordTableLimit(): Dictionary<boolean> {
    const { AAG_0, AAG_1, AAG_2 } = this.init_button_limit
    return {
      Store: AAG_0,
      Create: AAG_2,
      Delete: AAG_1
    }
  }
}
export default ReturnRecord
</script>

<style lang="less" scoped>
@import '~@/styles/theme.less';
@import '~@/styles/layout.less';
.AAU_module {
  box-sizing: border-box;
  padding: 20px;
  width: 100%;
  height: 100%;
  #flex(column, flex-start, flex-start);
  section {
    box-sizing: border-box;
    padding: 10px;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 5px;
    #color(background-color, --module-bg-color);
    #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
    .column {
      box-sizing: border-box;
      padding: 10px;
      height: 100%;
      border-radius: 5px;
      #color(background-color, --module-bg-color);
      #shadow-color(0, 2px, 12px, 0, --primary-shadow-color);
    }
    .column:last-child {
      margin-left: 20px;
    }
  }
  .settings {
    flex: 1;
    padding: 0;
    box-shadow: unset;
    background-color: unset;
    width: 100%;
    #flex(row, flex-start, flex-start);
    /deep/.el-tabs {
      flex: 1;
      height: 100%;
      .el-tabs__content {
        height: calc(100% - 60px);
        .el-tab-pane {
          height: 100%;
          #flex(row, center, flex-start);
          .upload-container {
            max-width: 300px;
            margin-right: 10px;
          }
          .remark-container {
            flex: 1;
            height: 100%;
            margin-left: 20px;
            #flex(column, center, flex-end);
            .item {
              width: 100%;
              margin-bottom: 10px;
              #flex(column, flex-start, flex-start);
              span {
                display: block;
                width: 120px;
                margin-right: 5px;
                font-size: 14px;
                text-align: left;
              }
              .el-select {
                width: 100%;
              }
            }
            .item:last-child {
              margin-bottom: 5px;
            }
          }
        }
      }
    }
    .normal {
      box-sizing: border-box;
      padding: 10px;
      width: 350px;
      #flex(column, center, center);
      .item {
        width: 100%;
        margin-top: 10px;
        #flex(row, center, space-between);
        span {
          white-space: nowrap;
          font-size: 14px;
          margin-right: 5px;
          #color(color, --primary-text-color);
        }
      }
    }
  }
  .table {
    flex: 1;
    margin-bottom: 0;
    overflow: auto;
  }
}
</style>
